<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head(~{::title})">
    <meta charset="UTF-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>关于我</title>
    <link href="../static/css/semantic.min.css" rel="stylesheet">
    <link href="../static/css/style.css" rel="stylesheet">
</head>
<body>
<!--导航 -->
<nav th:replace="_fragment::menu(0)" class="ui inverted attached segment m-padding-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">Y,Blog</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="home mini icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea mini icon "></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags mini icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="clone mini icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="info mini icon"></i>关于我</a>
            <div class="right m-item item m-mobile-hide">
                <div class="ui transparent inverted icon input">
                    <input type="text" placeholder="Search...">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </div>
</nav>

<!-- 中间内容 -->
<div class="m-container m-padding-tb-small m-container-height">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="eleven wide column">
                <div class="ui segment">
                    <img src="../static/images/girl.jpeg" th:src="${user.avatar}" alt="" class="ui fluid rounded image">
                </div>
            </div>
            <div class="five wide column">
                <div class="ui top attached segment">
                    <div class="ui header">关于我</div>
                </div>
                <div class="ui attached segment">
                    <p class="m-text-thin">转眼毕业一年多，感慨时间过得快。</p>
                    <p class="m-text-thin">进步还需努力，一点不能放弃</p>
                    <p class="m-text-thin">希望回头看自己</p>
                    <p class="m-text-thin">不曾后悔</p>
                    <p class="m-text-thin">希望展望将来</p>
                    <p class="m-text-thin">还有骄傲</p>
                    <p class="m-text-thin">继续努力，不付自己</p>
                </div>
                <div class="ui attached segment">
                    <a href="#" class="ui orange  basic left pointing label m-margin-tp-small">Java工程师</a>
                    <a href="#" class="ui orange  basic left pointing label m-margin-tp-small">小白</a>
                    <a href="#" class="ui orange  basic left pointing label m-margin-tp-small">前端爱好者</a>
                    <a href="#" class="ui orange  basic left pointing label m-margin-tp-small">游戏</a>
                    <a href="#" class="ui orange  basic left pointing label m-margin-tp-small">初入开发,不可自拔</a>
                </div>
                <div class="ui attached segment">
                    <a href="#" class="ui teal  basic left pointing label m-margin-tp-small">JAVA</a>
                    <a href="#" class="ui teal  basic left pointing label m-margin-tp-small">PATHON</a>
                    <a href="#" class="ui teal  basic left pointing label m-margin-tp-small">SPRINGBOOT</a>
                    <a href="#" class="ui teal  basic left pointing label m-margin-tp-small">VUE</a>
                    <a href="#" class="ui teal  basic left pointing label m-margin-tp-small">JS</a>
                    <a href="#" class="ui teal  basic left pointing label m-margin-tp-small">CSS</a>
                    <a href="#" class="ui teal  basic left pointing label m-margin-tp-small">HTML</a>
                    <a href="#" class="ui teal  basic left pointing label m-margin-tp-small">...</a>
                </div>
                <div class="ui bottom attached segment">
                    <a href="https://github.com/pyy531639577" class="ui circular icon button"><i class="github icon"></i></a>
                    <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
                    <a href="#" class="ui qq circular icon button" data-content="531639577" data-position="bottom center"><i class="qq icon"></i></a>
                </div>
                <div class="ui wechat-qr flowing popup transition hidden">
                    <img src="../static/images/qr.jpg" th:src="${user.wechatQRCode}" alt="" class="ui rounded image" style="width: 100px">
                </div>

            </div>
        </div>

    </div>
</div>

<!-- 底部footer -->
<footer th:replace="_fragment::footer" class="ui inverted vertical segment m-margin-top-small">
    <div class="ui center aligned container">
        <div class="ui stackable inverted divided grid m-padding-tb-big">
            <div class="three wide column">
                <div class="ui item">
                    <img src="../static/images/girl.jpeg" alt="" class="ui rounded image m-inline-block" style="width: 100px;">
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事{ user story }</a>
                    <a href="#" class="item">用户故事{ user story }</a>
                    <a href="#" class="item">用户故事{ user story }</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事{ user story }</a>
                    <a href="#" class="item">用户故事{ user story }</a>
                    <a href="#" class="item">用户故事{ user story }</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">xxxxxxxxxxxxxxxxxxxxxxxxx</p>
            </div>
        </div>
        <div class="ui inverted selection divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">渝ICP备19017104号-1 Copyright © 2020 - 2021 Mr.Peng</p>
        <div class="ali-report-wrap">
            <img class="ali-report-img" src="//img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png">
            <a class="link" href="http://idinfo.zjamr.zj.gov.cn/bscx.do?method=lzxx&amp;id=3301963301080000025024" target="_blank">
                <span >渝ICP备19017104号-1</span>
            </a>
        </div>
    </div>
</footer>

<!--/*/<th:block th:replace="_fragment::script">/*/-->
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide')
    });
    $('.qq').popup();
    $('.wechat').popup({
      popup: $('.wechat-qr'),
      position: "bottom center"
    });
</script>
</body>
</html>